<template>
    <div :class="[flag ? 'sun' : 'moon']">
        login
        <el-icon v-if="!flag" @click="handleTheme">
            <Sunny />
        </el-icon>
        <el-icon v-else @click="handleTheme">
            <Moon />
        </el-icon>
        <el-form label-width="auto" style="max-width: 500px">
            <el-form-item label="用户名">
                <el-input v-model="username" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="password" style="max-width: 500px" type="password" placeholder="Please input password"
                    show-password />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const routrer = useRouter()

const flag = ref(false)
const username = ref('')
const password = ref('')

const handleTheme = () => {
    flag.value = !flag.value
}


const onSubmit = () => {
    localStorage.setItem('username', username.value)
    routrer.push({
        path: '/'
    })
}

</script>

<style lang="scss" scoped>
.moon {
    width: 100vw;
    height: 100vh;
    background-color: pink;
}
</style>